<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2D图形转换</title>
    <style>
        body>div{
                width: 500px;
                height: 500px;
                background-color: rebeccapurple;
                /*skew:倾斜*/
                /*transform: skew(45deg,0deg);*/
        }
        body>div>div{
            width: 300px;
            height: 300px;
            background-color: green;
            /*translate:（x，y）平移*/
            transform: translate(100px,100px);
        }
        body>div>div>div{
            width: 300px;
            height: 300px;
            background-color: yellow;
            /*角度的单位：deg  rotate（deg）加角度*/
            transform: rotate(45deg);
            /*origin：原点，起始点  */
            /*tranform-origin：x y，设置图形转换的参考点
                默认是图形自身的中心点（center center）
            */
            transform-origin: 50% 50%;
            /*transform: scale(2,1);*/
        }
        body>div>div>div>div{
            width: 100px;
            height: 100px;
            background-color: pink;
           
            transform: scale(2);
            /*juzhen?? ,m...........*/
             transform-origin: 0% 0%;
            
            /*transform: rotate(90deg);*/
        }
    </style>
</head>
<body>
    <!--
        通过transform属性 （转换，转变）
        
        2D图形转换，是在平面坐标系查下，基于x轴，y轴对图形进行：
        平移：translate（）
        旋转：rotate（）
        缩放：scale（）
        倾斜：skew（）
    -->
    <div>
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
</body>
</html>